<template>
  <div class="mirror-icon"  @click="toogleMirrorStatus">
    <svg-icon
      icon="MirrorIcon"
			size="16"
    ></svg-icon>
  </div>
</template>
<script setup lang="ts">
import SvgIcon from '../../common/base/SvgIcon.vue';
import { useBasicStore } from '../../../stores/basic';
import useGetRoomEngine from '../../../hooks/useRoomEngine';
import { TRTCVideoMirrorType, TRTCVideoRotation, TRTCVideoFillMode } from '@tencentcloud/tuiroom-engine-uniapp-app';
import { isApp } from '../../../utils/environment';


const roomEngine = useGetRoomEngine();
const basicStore = useBasicStore();


function toogleMirrorStatus() {

    const trtcCloud = roomEngine.instance?.getTRTCCloud();
    trtcCloud?.setLocalRenderParams({
    mirrorType:
      basicStore.isLocalStreamMirror
        ? TRTCVideoMirrorType.TRTCVideoMirrorType_Enable : TRTCVideoMirrorType.TRTCVideoMirrorType_Disable,
    rotation: TRTCVideoRotation.TRTCVideoRotation0,
    fillMode: TRTCVideoFillMode.TRTCVideoFillMode_Fill,
  });
  basicStore.setIsLocalStreamMirror(basicStore.isLocalStreamMirror);
  basicStore.isLocalStreamMirror = !basicStore.isLocalStreamMirror;

}

</script>
<style lang="scss" scoped>
  .mirror-icon{
    display: flex;
  }
</style>
